<template>
  <div>
    <nut-config-provider :theme-vars="{
      navbarBoxShadow: 'none',
      navbarBackground: '#f8f8f8'
    }">
      <nut-navbar fixed left-show :safe-area-inset-top="true" background="#f8f8f8">
        <template #content>
          <div v-if="serviceDetail" text-30rpx font-bold color-black>
            {{ serviceStatusList(serviceDetail.serviceStatus) }}
          </div>

        </template>
      </nut-navbar>
    </nut-config-provider>
    <div color-warmgray text-center text-24rpx my-20rpx>
      {{ statusFilter(serviceDetail.serviceStatus) }}
    </div>
    <div v-if="isShow" px-16rpx pb-200rpx>
      <div class="order-cell" card mb-24rpx>
        <div class="order-cell_label" style="color:#000">审核日志</div>
        <div class="order-cell_value" @click="isShowVerifyLog = true">点击此处查看</div>
      </div>

      <!-- 循环商品 -->
      <div mb-24rpx card p-32rpx>
        <div my-10rpx>
          <order :res="serviceDetail" type="afterSale">

          </order>
        </div>

      </div>

      <!-- 如果服务类型为退款则不显示 -->
      <div mb-24rpx card v-if="serviceDetail.serviceType != 'RETURN_MONEY' && serviceDetail.serviceStatus != 'APPLY'">
        <div p-32rpx flex flex-a-c flex-j-sb>
          <div>商家退货地址</div>
        </div>
        <div>

          <div class="order-cell">
            <div class="order-cell_label">收货地址：</div>
            <div class="order-cell_value" v-if="storeAfterSaleAddress.salesConsigneeAddressPath">{{
      storeAfterSaleAddress.salesConsigneeAddressPath
    }}</div>
          </div>
          <div class="order-cell">
            <div class="order-cell_label">联系人：</div>
            <div class="order-cell_value">{{ storeAfterSaleAddress.salesConsigneeName
              }}</div>
          </div>
          <div class="order-cell">
            <div class="order-cell_label">联系方式：</div>
            <div class="order-cell_value">{{ storeAfterSaleAddress.salesConsigneeMobile
              }}</div>
          </div>
        </div>
        <div p-32rpx v-if="serviceDetail.serviceStatus &&
      serviceDetail.serviceStatus === 'PASS' &&
      serviceDetail.serviceType !== 'RETURN_MONEY'">
          <nut-button @click="$navigateTo('/pages/mine/aftersale/express?sn=' + routerVal.sn + '')" type="primary" plain
            block>提交物流</nut-button>
        </div>
      </div>

      <!-- 回寄快递 -->
      <div mb-24rpx card
        v-if="serviceDetail.mlogisticsName || serviceDetail.mlogisticsNo || serviceDetail.mDeliverTime">
        <div p-32rpx flex flex-a-c flex-j-sb>
          <div>回寄商品信息</div>
        </div>
        <div class="order-cell" v-if="serviceDetail.mlogisticsName">
          <div class="order-cell_label">回寄快递：</div>
          <div class="order-cell_value">{{ serviceDetail.mlogisticsName }}</div>
        </div>
        <div class="order-cell" v-if="serviceDetail.mlogisticsNo">
          <div class="order-cell_label">回寄运单号：</div>
          <div class="order-cell_value">{{ serviceDetail.mlogisticsNo }}</div>
        </div>
        <div class="order-cell" v-if="serviceDetail.mDeliverTime">
          <div class="order-cell_label">回寄时间：</div>
          <div class="order-cell_value">{{ serviceDetail.mDeliverTime }}</div>
        </div>
      </div>
      <!-- 订单信息 -->
      <div mb-24rpx card>
        <div p-32rpx flex flex-a-c flex-j-sb>
          <div>订单信息</div>
        </div>
        <div v-if="serviceDetail.actualRefundPrice" class="order-cell">
          <div class="order-cell_label">实际退款：</div>
          <div class="order-cell_value" text-main-color font-bold text-30rpx>{{
      unitPrice(serviceDetail.applyRefundPrice, '￥') }}</div>
        </div>
        <div class="order-cell">
          <div class="order-cell_label">退款金额：</div>
          <div class="order-cell_value" text-main-color font-bold text-30rpx>{{
      unitPrice(serviceDetail.applyRefundPrice, '￥') }}</div>
        </div>

        <div class="order-cell">
          <div class="order-cell_label">服务单号：</div>
          <div class="order-cell_value">{{ serviceDetail.sn }}
            <copy :content="serviceDetail.sn" />
          </div>
        </div>

        <div class="order-cell">
          <div class="order-cell_label">订单编号：</div>
          <div class="order-cell_value">{{ serviceDetail.orderSn }}
            <copy :content="serviceDetail.orderSn" />
          </div>
        </div>
        <div class="order-cell" v-if="serviceDetail.new_order_sn">
          <div class="order-cell_label">新订单编号：</div>
          <div class="order-cell_value">{{ serviceDetail.new_order_sn }}
            <copy :content="serviceDetail.new_order_sn" />
          </div>
        </div>
        <div class="order-cell" v-if="serviceDetail.actual_price">
          <div class="order-cell_label">退款时间：</div>
          <div class="order-cell_value">{{
      unixToDate(serviceDetail.refund_time, 'yyyy-MM-dd hh:mm:ss') }}</div>
        </div>
        <div class="order-cell">
          <div class="order-cell_label">服务类型：</div>
          <div class="order-cell_value">
            {{
      serviceTypeList[serviceDetail.serviceType]
    }}
          </div>
        </div>
        <div class="order-cell">
          <div class="order-cell_label">申请原因：</div>
          <div class="order-cell_value">{{ serviceDetail.reason || '暂未填写' }}</div>
        </div>
        <div class="order-cell">
          <div class="order-cell_label">问题描述：</div>
          <div class="order-cell_value">
            <div>{{ serviceDetail.problemDesc }}</div>
            <div flex flex-a-c gap-20rpx mt-20rpx class="detail-item" v-if="serviceDetail.afterSaleImage &&
      serviceDetail.afterSaleImage.split(',').length != 0
      ">
              <div v-for="(img, index) in serviceDetail.afterSaleImage.split(',')" :key="index">
                <image w-100rpx h-100rpx :src="img" @click="preview(serviceDetail.afterSaleImage.split(','), index)">
                </image>
              </div>
            </div>
          </div>
        </div>

        <div class="order-cell">
          <div class="order-cell_label">退款方式：</div>
          <div class="order-cell_value">{{ refundWayFilter(serviceDetail.refundWay)
            }}</div>
        </div>
        <div class="order-cell" v-if="accountShow && serviceDetail.refund_price != 0">
          <div class="order-cell_label">账户类型：</div>
          <div class="order-cell_value">{{ accountTypeFilter(serviceDetail.accountType)
            }}</div>
        </div>

        <div v-if="bankShow && serviceDetail.actualRefundPrice != 0">
          <div>
            <div class="order-cell">
              <div class="order-cell_label">银行账号：</div>
              <div class="order-cell_value">{{ serviceDetail.bankAccountNumber }}</div>
            </div>

            <div class="order-cell">
              <div class="order-cell_label">银行开户名：</div>
              <div class="order-cell_value">{{ serviceDetail.bankAccountName }}</div>
            </div>

            <div class="order-cell">
              <div class="order-cell_label">银行开户行：</div>
              <div class="order-cell_value">{{ serviceDetail.bankDepositName }}</div>
            </div>



          </div>
        </div>

      </div>


      <nut-toast ref="toastRef" />
    </div>

    <nut-popup position="bottom" :custom-style="{ height: '600rpx' }" closeable round v-model:visible="isShowVerifyLog">
      <div p-36rpx pb-10rpx>

        <div my-10rpx py-10rpx v-for="(item, index) in verifyLog" :key="index">
          <div text-28rpx color-black>
            {{ item.message }}
          </div>
          <div text-24rpx mt-10rpx color-warmgray>
            {{ item.createTime }}
          </div>
        </div>
      </div>
    </nut-popup>
  </div>
</template>

<script setup lang="ts">
import { getAfterSaleLog, getServiceDetail, getStoreAfterSaleAddress } from "@/api/after-sale";
import order from '@/components/basic-template/order.vue';
import copy from '@/components/copy/index.vue';
import { serviceStatusList, unitPrice, unixToDate } from '@/utils/filters';
import { onLoad, onPullDownRefresh, onShow } from '@dcloudio/uni-app';
import type { ToastInst } from 'nutui-uniapp';
const routerVal = ref<any>({}) //路由信息
const isShow = ref<boolean>(false) //是否展示页面
const accountShow = ref<boolean>(false)
const bankShow = ref<boolean>(false)
const serviceDetail = ref<any>({}) // 订单详情
const verifyLog = ref<any>([]) // 审核日志
const isShowVerifyLog = ref<boolean>(false)
const toastRef = ref<ToastInst>()
const storeAfterSaleAddress = ref<any>('')
const serviceTypeList = ref<any>({
  // 售后类型
  RETURN_GOODS: "退货",
  RETURN_MONEY: "退款",
})

function accountTypeFilter(val: string) {
  switch (val) {
    case "WEIXINPAY":
      return "微信";
    case "ALIPAY":
      return "支付宝";
    case "BANK_TRANSFER":
      return "银行卡";
    default:
      return "";
  }
}

function refundWayFilter(val: string) {
  switch (val) {
    case "OFFLINE":
      return "账户退款";
    case "ORIGINAL":
      return "原路退回";
    default:
      return "";
  }
}

function preview(urls: any, index: number) {
  uni.previewImage({
    current: index,
    urls: urls,
    longPressActions: {
      itemList: ["保存图片"],
      success: function (data) { },
      fail: function (err) { },
    },
  });
}

function statusFilter(val: string) {
  switch (val) {
    case "APPLY":
      return "售后服务申请成功，等待商家审核";
    case "PASS":
      return "售后服务申请审核通过";
    case "REFUSE":
      return "售后服务申请已被商家拒绝，如有疑问请及时联系商家";
    case "FULL_COURIER":
      return "申请售后的商品已经寄出，等待商家收货";
    case "STOCK_IN":
      return "商家已将售后商品入库";
    case "WAIT_FOR_MANUAL":
      return "等待平台进行人工退款";
    case "REFUNDING":
      return "商家退款中，请您耐心等待";
    case "COMPLETED":
      return "售后服务已完成，感谢您的支持";
    case "ERROR_EXCEPTION":
      return "系统生成新订单异常，等待商家手动创建新订单";
    case "CLOSED":
      return "售后服务已关闭";
    case "WAIT_REFUND":
      return "等待平台进行退款";
    default:
      return "";
  }
}

// 获取审核日志
async function fetchVerifyLogs() {
  const res = await getAfterSaleLog(routerVal.value.sn)
  if (res.data.success) {
    verifyLog.value = res.data.result
  }
}

// 获取卖家地址
async function getAddress() {
  const res = await getStoreAfterSaleAddress(routerVal.value.sn)
  if (res.data.success) {
    storeAfterSaleAddress.value = res.data.result
  }
}

async function init() {
  uni.stopPullDownRefresh();
  getSaleInfo()
  fetchVerifyLogs();
}

// 订单详情
async function getSaleInfo() {
  const res = await getServiceDetail(routerVal.value.sn)
  if (res.data.success) {
    isShow.value = true
    serviceDetail.value = res.data.result
    accountShow.value =
      (res.data.result.serviceType === "RETURN_GOODS" ||
        res.data.result.serviceType === "ORDER_CANCEL") &&
      res.data.result.refundWay === "OFFLINE";

    bankShow.value = res.data.result.accountType === "BANK_TRANSFER" && res.data.result.refundWay === "OFFLINE"

    if (serviceDetail.value.serviceType != 'RETURN_MONEY' && serviceDetail.value.serviceStatus != 'APPLY') {
      getAddress()
    }
  }
}

onShow(() => {
  init()
})

onPullDownRefresh(() => {
  init()
})

onLoad((options) => {
  routerVal.value = options
  init()
})
</script>

<style scoped lang="scss">
.order-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;

  font-size: 24rpx;

  &_label {
    color: #999;
    font-size: 24rpx;
    min-width: 150rpx;
  }

  &_value {
    text-align: right;

  }
}

.tab-bar {
  background: #fff;
  height: 100rpx;
  position: fixed;
  bottom: 0;
  width: 100vw;
}
</style>
